<template>
  <div>
    <van-popup v-model="myPopShow" position="bottom" round @click-overlay="onPopupClose">
      <DateTools
        :config="config"
        :showDateTypeBar="showDateTypeBar"
        :minDate="minDate"
        :maxDate="maxDate"
        :maxMonth="maxMonth"
        :precisionMinMax="precisionMinMax"
        :defCalendarView="defCalendarView"
        @cancel="onTimeCancel"
        @confirm="onTimeConfirm"
        @invalidSelect="onInvalidSelect"
        @dateTypeChanged="onDateTypeChanged"
      />
    </van-popup>
  </div>
</template>

<script>
import { debounce } from "@/js/helper.js";
import DateTools, { getDefaultDateInfo } from "@/components/common/DateTools.vue";
import dayjs from "dayjs";

export default {
  name: "CockpitH5DatePopup",
  props: {
    show: { type: Boolean, default: false },
    config: { Type: Object, default: () => ({ d: 1 }), require: true },
    showDateTypeBar: { type: Boolean, default: () => true }, // 顶部日期类型切换条
    // 最小日期 (string 或者 dayjs对象)
    minDate: { type: String | Object, default: "2022-01-01" },
    // 最大日期 (string 或者 dayjs对象)
    maxDate: { type: String | Object },
    // 最大月份 (string 或者 dayjs对象)
    maxMonth: { type: [String, Object] },
    precisionMinMax: Boolean, // min max 日历配置是否精确到日
    defCalendarView: { type: String, default: "today" },
    firstCallBack: { type: Boolean, default: false },
  },
  components: { DateTools },
  computed: {
    myPopShow: {
      get() {
        return this.show;
      },
      set(val) {
        this.$emit("update:show", val);
      },
    },
  },
  data() {
    return {
      isShowDate: false,
      //startDt、endDt
      selectedInfo: {},
    };
  },

  mounted() {
    this.reloadDefaultInfo();
  },
  methods: {
    onPopupClose() {
      this.myPopShow = false;
    },
    onInvalidSelect(info) {
      this.$emit("invalidSelect", info);
    },
    onDateTypeChanged(info) {
      this.$emit("dateTypeChanged", info);
    },

    onTimeCancel() {
      this.onPopupClose();
    },

    onTimeConfirm(info, isUserSelected = false) {
      let tmp = "-";
      let startDt = void 0;
      let endDt = void 0;
      this.selectedInfo.customVal = void 0;

      const {
        showDateFmtD = "YYYY-MM-DD",
        showDateFmtM = "YYYY-MM",
        paramDateFmt = "YYYY-MM-DD",
      } = this.config;
      const _getDateInfo = (old, fmt) => dayjs(old).format(fmt);

      switch (info.dateType) {
        case "d":
          {
            const { dayType = "single" } = this.config;
            if (dayType == "single") {
              tmp = _getDateInfo(info.selectedDateInfo, showDateFmtD);
              startDt = _getDateInfo(info.selectedDateInfo, paramDateFmt);
              endDt = _getDateInfo(info.selectedDateInfo, paramDateFmt);
            } else if (dayType == "range") {
              if (!(info.rangeStart && info.rangeEnd)) {
                this.$toast("请选择完整日期范围");
                return;
              }
              tmp =
                _getDateInfo(info.rangeStart, showDateFmtD) +
                "-" +
                _getDateInfo(info.rangeEnd, showDateFmtD);
              startDt = _getDateInfo(info.rangeStart, paramDateFmt);
              endDt = _getDateInfo(info.rangeEnd, paramDateFmt);
            }
          }
          break;
        case "w":
          {
            tmp = info.weekInfo;
            startDt = _getDateInfo(info.weekRangeStart, paramDateFmt);
            endDt = _getDateInfo(info.weekRangeEnd, paramDateFmt);
          }
          break;
        case "m":
          {
            tmp = _getDateInfo(info.selectedMonthInfo, showDateFmtM);
            startDt = dayjs(info.selectedMonthInfo).startOf("month").format(paramDateFmt);
            endDt = dayjs(info.selectedMonthInfo).endOf("month").format(paramDateFmt);
          }
          break;
        case "y":
          {
            tmp = info.selectedYearInfo;
            startDt = dayjs(info.selectedYearInfo).startOf("year").format(paramDateFmt);
            endDt = dayjs(info.selectedYearInfo).endOf("year").format(paramDateFmt);
          }
          break;
        case "custom":
          {
            tmp = info.selectedCustomItem.text;
            this.selectedInfo.customVal = info.selectedCustomItem.val;
          }
          break;

        default:
          break;
      }
      this.selectedInfo.startDt = startDt;
      this.selectedInfo.endDt = endDt;
      this.selectedInfo.dateInfo = tmp;
      this.onPopupClose();
      this.onConfirm(info);
    },
    onConfirm(info) {
      this.$emit("confirm", this.selectedInfo, info);
    },
    reloadDefaultInfo: debounce(
      async function () {
        this.updateDateInfo(this.firstCallBack);
      },
      200,
      false
    ),
    updateDateInfo(callback) {
      this.$nextTick(async () => {
        let def = await this.getDefDateInfo();
        const { error } = def;
        if (error) {
          this.$notify({
            message: error.info,
            type: "danger",
            duration: 1000,
          });
        } else {
          if (callback) {
            this.onTimeConfirm(def);
          }
        }
      });
    },
    async getDefDateInfo() {
      let obj = getDefaultDateInfo(this.config);
      return obj;
    },
  },
};
</script>
